<template>
  <div>
    <div class="all">
      <Commonhead datum="编辑资料" @click.native="back"></Commonhead>
      <div class="imges">
        <van-uploader :after-read="afterRead">
          <img
            v-if="information.head_img"
            :src="'http://157.122.54.189:9083' + information.head_img"
            alt=""
          />
          <img v-else src="@/assets/2.jpg" alt="" />
        </van-uploader>
      </div>
      <div class="cipher">
        <Commonmessage
          person="昵称"
          :news="information.nickname"
          @click.native="getnickname"
        ></Commonmessage>
        <Commonmessage
          person="密码"
          news="******"
          @click.native="keyboard"
        ></Commonmessage>
        <Commonmessage
          person="性别"
          :news="information.gender == 1 ? '男' : '女'"
          @click.native="isShowgender = true"
        ></Commonmessage>
      </div>
    </div>
    <!-- 弹出框-修改名称 -->
    <van-dialog
      v-model="isShow"
      title="修改昵称"
      @focus="keyboarshow = true"
      show-cancel-button
      @confirm="setNickname"
    >
      <van-field v-model="newnickname" placeholder="请输入用户名" />
    </van-dialog>
    <!-- 键盘-修改密码 -->
    <div>
      <p>
        <van-dialog
          v-model="isShowpassword"
          title="修改密码"
          @confirm="setPassword"
          show-cancel-button
        >
          <van-field
            v-model="newPassword"
            placeholder="新密码"
            @focus="keyboarshow = true"
            @blur="keyboarshow = false"
          />
        </van-dialog>
      </p>
      <p>
        <!-- @touchstart.native.stop="show = false"显示键盘 -->
        <van-number-keyboard
          v-model="newPassword"
          :show="keyboarshow"
          :maxlength="6"
          z-index="10000000000"
          @focus="keyboarshow = true"
        />
        <!-- :maxlength="6" 为长度 -->
      </p>
    </div>
    <!-- 单选框-修改性别 -->
    <van-action-sheet
      v-model="isShowgender"
      :actions="genderList"
      cancel-text="取消"
      @select="setGender"
    />
  </div>
</template>

<script>
import Commonmessage from "@/components/Commonmessage";
import Commonhead from "@/components/Commonhead";
export default {
  components: { Commonmessage, Commonhead },
  data() {
    return {
      keyboarshow: false,
      isShowpassword: false,
      newPassword: "",

      information: {},
      isShow: false,
      newnickname: "",

      isShowgender: false,
      genderList: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 },
      ],
      // 图片上传
    };
  },
  // 生命周期-创建阶段完成
  created() {
    // 调用一次
    this.loadPage();
  },
  methods: {
    // 修改密码
    keyboard() {
      this.keyboarshow = true;
      this.isShowpassword = true;
    },

    afterRead(fileList) {
      // 此时可以自行将文件上传至服务器
      console.log(fileList);
      const fd = new FormData();
      fd.append("file", fileList.file); //file是参数key植，api上的， fileList.file是数据
      this.$axios({
        method: "post",
        url: "upload",
        headers: { Authorization: localStorage.getItem("token") },
        data: fd,
      }).then((res) => {
        console.log(res.data);
        const { message, data } = res.data;
        if (message == "文件上传成功") {
          console.log(data.url);
          // 图片渲染
          const newData = {
            head_img: data.url,
          };
          this.editProfile(newData);
        }
      });
    },
    // 注册一个方法，每当页面进来就会刷新一次
    //修改昵称
    loadPage() {
      this.$axios({
        method: "post",
        url: "user_update/" + localStorage.getItem("userId"),
        // data: { username: information.username },
        headers: { Authorization: localStorage.getItem("token") },
      }).then((res) => {
        console.log(res.data);
        const { message, data } = res.data;
        if (message == "修改成功") {
          this.information = data;
        }
      });
    },
    // 箭头的点击事件
    back() {
      this.$router.push("/mycenter");
    },
    getnickname() {
      console.log(this.newnickname);
      this.isShow = true;
    },

    // 修改昵称
    setNickname() {
      const data = { nickname: this.newnickname };
      this.editProfile(data);
    },
    //修改性别
    setGender(genderList) {
      console.log("选中");
      console.log(genderList);

      const data = {
        gender: genderList.gender,
      };
      console.log(genderList.gender);
      this.editProfile(data);
      this.isShowgender = false;
    },

    // 修改密码
    setPassword() {
      const data = {
        password: this.newPassword,
      };
      this.editProfile(data);
    },
    // 封装修改用户信息
    editProfile(data) {
      this.$axios({
        method: "post",
        url: "user_update/" + localStorage.getItem("userId"),
        headers: { Authorization: localStorage.getItem("token") },
        data,
      }).then((res) => {
        if (res.data.message == "修改成功") {
          this.$toast("修改成功");
          // console.log(this.newnickname);
          // this.$router.push("/compile");
          console.log(res.data);
          this.loadPage(); //刷新页面
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.all {
  min-height: 100vh;
  background-color: #f2f2f2;

  .cipher {
    padding-top: 30/360 * 100vw;
  }
}
.imges {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 23/360 * 100vw;
  img {
    border-radius: 50%;
    height: 70/360 * 100vw;
    width: 70/360 * 100vw;
  }
}
</style>